<template>
  <div class="login_bor">
    <div class="login_img">
      <img height="350px" width="100%" src="../../static/img/login_body_bg.png" />
    </div>
    <div class="login">
      <div class="login_inp">
          <div class="login_tit">
            <p class="mess">登录</p>
          </div>
        <el-form :label-position="labelPosition" class="login_form" label-width="80px" :model="formLabelAlign">
          <el-form-item label="用户名">
            <el-input v-model="users.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="users.password"></el-input>
          </el-form-item>
          <el-button type="primary" plain class="login_btn" @click="login()">登录</el-button>
        </el-form>
        <p class="toreg">没有账号？去<a style="color:blue" @click="goregist()">注册</a></p>
      </div>
      <div class="login_rig">
        <img class="login_rig_img" src="../../static/img/login_body_right.png" />
      </div>
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import axios from "axios";
export default {
    data() {
      return {
        labelPosition: 'right',
        users: {},
        username:"",
        userUid:""
      }
    },
    methods:{

        goregist:function(){
            this.$router.push("/registry");
        },
      login:function () {
        var _this = this;
        axios.post("/api/user/login",_this.users).then(function (res) {


          if (res.data=="用户名不存在" || res.data=="密码错误，请重新输入"){
            alert(res.data)

          }else {
            axios.defaults.headers["token"]=res.data
            _this.username = _this.users.username;
            _this.$router.push("/");
            location.reload();
            alert("登录成功")
            Cookies.set("username",_this.users.username,30);

            Cookies.set("token",res.data,30)
          }
        })
      }
    }

};
</script>

<style>
.login_bor {
  height: 800px;
  background-color: #ffffff;
  width: 100%;
}
.login {
  width: 900px;
  height: 513px;
  background-color: #ffffff;
  position: absolute;
  left: 315px;
  top: 200px;
  box-shadow: #666 0 0 0.7rem;
}
.login_rig {
  float: right;
  background-color: burlywood;
  height: 513px;
  width: 200px;
}
.login_rig_img {
  position: absolute;
  right: 0px;
}
.login_inp {
  width: 481px;
  height: 513px;
  float: left;
}
.login_tit{
    width: 513px;
    height: 80px;

}
.login_form{
    width: 400px;
    margin-left: 30px;
    margin-top: 30px;
}
.mess{
    font-size: 25px;
    line-height: 60px;
    margin-left: 20px;
}
.login_btn{
    width: 100px;
    margin-left: 70px;
}
.toreg{
    float: right;
    margin-right: 50px;
}
</style>
